<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>mobileapp</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" href="css/iconfont.css">
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/app.css">
	<link rel="stylesheet" href="css/slxxk1.css">
	
</head>

<body>
	<div class="container-fluid">
		<div class="row justify-content-end">
			<div class="col-lg-4 position-fixed border-right leftCon">
				<!-- 导航栏 -->
				<header class="navbar d-none d-sm-flex px-0 px-lg-3 py-3 py-lg-4">
					<a href="#" class="navbar-brand"><img src="images/logo.svg" alt="" width="36"></a>
					<ul class="nav mr-auto">
						<li class="nav-item">
							<a href="#" class="nav-link text-dark font-weight-bold">门店</a>
						</li>
						<li class="nav-item"></li>
							<a href="#" class="nav-link text-dark font-weight-bold">我的账户</a>
						</li>
						<li class="nav-item">
							<a href="#" class="nav-link text-dark font-weight-bold">菜单</a>
						</li>
					</ul>
					<span class="iconfont icon-menu" id="showBtn"></span>
				</header>

				<!-- 标题与登录注册 -->
				<div class="d-flex align-items-center login">
					<!-- <div class="px-0 px-lg-5">
						<h1 class="font-weight-bold py-3">心情惬意，来杯咖啡吧 <span class="iconfont icon-kafei"></span></h1>
						<div class="d-none d-sm-block my-3">
							<a href="#" class="text-success">
								<span class="iconfont icon-denglu"></span>
								<span>登录</span>
							</a>
							<a href="#" class="btn btn-outline-success ml-4 register">注册</a>
						</div>
					</div> -->
					<div id="txt">
						<h2>星巴克移动应用</h2><br>
						<a href="mobileapp.html" id="title1"><h3>星巴克移动应用</h3></a><br>
						<a href="apple watch.html" id="title1"><h3>星巴克Apple Watch</h3></a>
					</div>
				</div>

				<!-- 点击菜单后要展示的内容 -->
				<div class="d-flex bg-white flex-column justify-content-between position-absolute menu hide">
					<header class="navbar d-flex px-0 px-lg-3 py-3 py-lg-4">
						<a href="#" class="navbar-brand"><img src="images/logo.svg" alt="" width="36"></a>
						<span class="iconfont icon-guanbi" id="closeBtn"></span>
					</header>
					<div class="list">
						<ul class="list-unstyled mx-sm-5 pl-sm-5">
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">门店</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">星享俱乐部</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">菜单</a></li>
							<hr>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">星巴克移动应用</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">星礼卡</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">星巴克臻选™</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">啡快™ － 在线点 到店取</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">专星送™</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">咖啡星讲堂</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">上海烘焙工坊</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">关于星巴克</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">帮助中心</a></li>
							<hr>
						</ul>	
					</div>
				</div>

			</div>
		</div>
	</div>
    
	<!-- <div id="txt">
        <h2>星巴克移动应用</h2>
        <h3>星巴克移动应用</h3>
        <h3>星巴克Apple Watch</h3>
	</div> -->
	<div style="position: relative;">
    <div style="overflow: scroll;overflow-x: hidden; position: relative;" id="scroll">
        <img id="img1"><br>
        <img id="img2">
        <img src="images/phone MP4.png" alt="" id="img3">
        <div>
            <video class="mockup" controls="" muted="" id="Video">
              <source src="https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/apps-mobile-screens-cn.mp4" type="video/mp4">
            </video>
          </div>
        <div id="title" style="position: absolute;">下载星巴克App</div>
        <div id="content1" style="position: absolute;">加入星享俱乐部，积星星享好礼。轻松管理星礼<br>
            卡，支付时即可加速积星，每消费40元获得一颗星<br>
            星，比其他支付方式积星快25%。还能随时点咖<br>
            啡，体验专星送™。<br><br>
            在App内随心挑选和购买电子星礼卡, 随时查看余<br>
            额，充值和管理卡片。</div>
        <a href="https://apps.apple.com/cn/app/xing-ba-ke-zhong-guo/id499819758?ls=1"><img src="images/ios.png" id="ios-down"></a>
        <a href="#last"><img src="images/android.png" id="android-down"></a>
        <!-- <span class="tag_ad">广告</span>       -->
        <img src="images/button background.png" alt="" id="bback">
		<!-- 右侧导航栏 -->
		<div id="slxxk" style="position: absolute;">
			<ul style="margin-top: 50px; width: 975px;">
				<li class="slyes" style="float: left;">
					<img src="images/star.svg" style="width: 100px;" >
					<br><br><p>星享俱乐部</p>
				</li>
				<li class="false" style="float: left;" >
					<img src="images/card.svg" style="width: 100px; margin-top: 20px;">
					<br><p style="margin-top: 34px;">星礼卡</p>
				</li>
				<li class="false" style="float: left;" >
					<img src="images/store.svg" style="width: 100px;">
					<br><br><p>查找星门店</p>
				</li>
				<li class="false" style="float: left;" >
					<img src="images/message.svg" style="width: 120px; margin-top: 20px;">
					<br><p style="margin-top: 25px;">了解星消息</p>
				</li>
			</ul><br>
			<div class="slyes" style="text-align: center;"><img src="images/star content.png" alt=""></div>
			<div class="slno" style="text-align: center;"><img src="images/card content.png" alt=""></div>
			<div class="slno" style="text-align: center;"><img src="images/store content.png" alt=""></div>
			<div class="slno" style="text-align: center;"><img src="images/message content.png" alt=""></div>
		</div>

		<div class="wrapper section" id="android" style="position: absolute;">
			<h3 class="center" id="last">
			  星巴克手机应用目前在
			  <a href="https://itunes.apple.com/cn/app/xing-ba-ke-zhong-guo/id499819758?ls=1&amp;mt=8" id="app-store-ios" class="link">App Store</a>
			  和以下安卓平台均有下载
			</h3><br>
		  
		  
			<p class="center max-w18 w-auto">
			  <a target="_blank" class="link" id="app-store-tencent" href="http://android.myapp.com/myapp/detail.htm?apkName=com.starbucks.cn">应用宝</a>
			  <span class="padded-x-3">|</span>
			  <a target="_blank" class="link" id="app-store-mi" href="http://app.mi.com/details?id=com.starbucks.cn">小米商店</a>
			  <span class="padded-x-3">|</span>
			  <a target="_blank" class="link" id="app-store-360" href="http://zhushou.360.cn/detail/index/soft_id/1803619?recrefer=SE_D_%E6%98%9F%E5%B7%B4%E5%85%8B%E4%B8%AD%E5%9B%BD">360手机助手</a>
			  <span class="padded-x-3">|</span>
			  <a target="_blank" class="link" id="app-store-baidu" href="https://shouji.baidu.com/software/25974739.html">百度手机助手</a>
			  <span class="padded-x-3">|</span>
			  <a target="_blank" class="link" id="app-store-meizu" href="http://app.flyme.cn/apps/public/detail?package_name=com.starbucks.cn">魅族</a>
			  <span class="padded-x-3">|</span>
			  <a target="_blank" class="link" id="app-store-wandoujia" href="http://www.wandoujia.com/apps/com.starbucks.cn">豌豆荚安装</a>
			  <span class="padded-x-3">|</span>
		      <a target="_blank" class="link" id="app-store-huawei" href="http://app.hicloud.com/app/C100108223">华为应用市场</a>
			</p>
		  <br>
			<div class="flex flex-column items-center margin3">
			<img src="https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/app_qr_20181112.jpg" height="160">
		  </div>
		  
		  
		  <br><br>
			<p class="center margin-t2">如果您有任何问题，请查看常见问题，也可以直接与我们联系</p>
			<p>
			  <button><a href="https://www.starbucks.com.cn/help/mobile" id="question">常见问题</a></button>
			  <button><a href="https://www.starbucks.com.cn/about/contact/" id="conect">联系我们</a></button>
			</p>
		  </div>
	</div>
	<!-- 导航栏js -->
	<script type="text/javascript">
		window.onload=function(){
			var mytab =document.getElementById("slxxk");
			var myul=mytab.getElementsByTagName("ul")[0];
			var myli=myul.getElementsByTagName("li");
			var mydiv=mytab.getElementsByTagName("div");
			for(i=0,len=myli.length;i<len;i++){
				 myli[i].index=i;
				  myli[i].onclick=function(){
					  for(var n=0;n<len;n++){
						  myli[n].className="";
						  mydiv[n].className="slno";
						  }this.className="slyes";
						  mydiv[this.index].className="";
						  }}}    
		</script>
    </div>

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
		crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
		integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
		crossorigin="anonymous"></script>
	<script>
		$('#showBtn').on('click',function(){
			$('.menu').removeClass('hide').addClass('show');
			shadowMenu();
		});
		$('#closeBtn').on('click',function(){
			$('.menu').removeClass('show').addClass('hide');
			shadowMenu();
		});

	
	</script>


</body>

</html>